import React from 'react';

interface StreamlabsLogoProps {
  color?: string;
  className?: string;
}

export default function StreamlabsLogo({ color = 'white', className }: StreamlabsLogoProps) {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }} className={className}>
      {/* Icon */}
      <svg
        style={{ marginRight: '22px' }}
        xmlns="http://www.w3.org/2000/svg"
        width="59"
        height="52"
        viewBox="0 0 59 52"
        fill="none"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M12.6719 30.8719C12.6719 24.5013 12.6719 21.316 13.9117 18.8828C15.0023 16.7424 16.7424 15.0023 18.8828 13.9117C21.316 12.6719 24.5013 12.6719 30.8719 12.6719H39.9719C46.3425 12.6719 49.5278 12.6719 51.9611 13.9117C54.1014 15.0023 55.8416 16.7424 56.9321 18.8828C58.1719 21.316 58.1719 24.5013 58.1719 30.8719V33.4719C58.1719 39.8425 58.1719 43.0278 56.9321 45.4611C55.8416 47.6014 54.1014 49.3416 51.9611 50.4321C49.5278 51.6719 46.3425 51.6719 39.9719 51.6719H23.0719C19.4316 51.6719 17.6114 51.6719 16.221 50.9635C14.9979 50.3403 14.0036 49.3459 13.3804 48.1229C12.6719 46.7324 12.6719 44.9123 12.6719 41.2719V30.8719ZM28.9219 32.1719C28.9219 30.377 30.377 28.9219 32.1719 28.9219C33.9669 28.9219 35.4219 30.377 35.4219 32.1719V38.6719C35.4219 40.4669 33.9669 41.9219 32.1719 41.9219C30.377 41.9219 28.9219 40.4669 28.9219 38.6719V32.1719ZM45.1719 28.9219C43.377 28.9219 41.9219 30.377 41.9219 32.1719V38.6719C41.9219 40.4669 43.377 41.9219 45.1719 41.9219C46.9669 41.9219 48.4219 40.4669 48.4219 38.6719V32.1719C48.4219 30.377 46.9669 28.9219 45.1719 28.9219Z"
          fill={color}
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M24.0221 2.84927C24.2436 4.63047 22.9792 6.25399 21.198 6.4755C20.2161 6.5976 19.4273 6.76372 18.7291 6.9813C13.1207 8.72894 8.72894 13.1207 6.9813 18.7291C6.76372 19.4273 6.5976 20.2161 6.4755 21.198C6.25399 22.9792 4.63047 24.2436 2.84927 24.0221C1.06806 23.8006 -0.196325 22.1771 0.0251822 20.3959C0.184267 19.1166 0.419714 17.9374 0.775611 16.7953C3.15877 9.14747 9.14747 3.15877 16.7953 0.77561C17.9374 0.419714 19.1166 0.184267 20.3959 0.0251822C22.1771 -0.196325 23.8006 1.06806 24.0221 2.84927Z"
          fill={color}
        />
      </svg>
      {/* Text */}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="228"
        height="35"
        viewBox="0 0 228 35"
        fill="none"
      >
        <path
          d="M9.33224 12.2717C4.64574 12.2717 0.414242 15.1837 0.414242 19.5517C0.414242 23.6467 4.19074 25.0117 7.92174 25.5577C10.3787 25.9217 11.2887 26.1037 11.2887 27.0137C11.2887 27.8327 10.5607 28.2422 9.42324 28.2422C6.55674 28.2422 5.51024 27.1957 3.14424 27.1957C1.09674 27.1957 0.323242 28.6972 0.323242 30.6082C0.323242 32.6557 4.00874 34.1117 8.64974 34.1117C14.7922 34.1117 18.0227 31.3362 18.0227 26.8317C18.0227 22.6457 14.8832 21.0077 10.0147 20.3252C8.42224 20.0977 7.10274 20.0977 7.10274 19.1422C7.10274 18.2777 8.19474 17.8682 9.55974 17.8682C11.1067 17.8682 13.0177 18.7782 14.5192 18.7782C16.4757 18.7782 17.2947 17.5042 17.2947 15.6387C17.2947 14.3647 16.4757 13.6367 15.5202 13.2272C13.8367 12.4992 11.9257 12.2717 9.33224 12.2717Z"
          fill={color}
        />
        <path
          d="M21.8536 18.9602H23.4006C23.4461 21.0987 23.3551 23.3282 23.3551 25.4667C23.3551 31.4727 26.5401 33.9297 30.7261 33.9297C33.0921 33.9297 34.0476 33.7477 35.0941 33.0197C35.9131 32.4737 36.3226 31.7002 36.3226 29.9712C36.3226 28.5152 35.3671 27.0592 33.7291 27.0592C33.0466 27.0592 32.8646 27.2867 31.9546 27.2867C30.7716 27.2867 30.4531 25.9217 30.4531 24.8297V18.9147H33.5926C35.2306 18.9147 36.0496 17.4587 36.0496 15.7752C36.0496 13.6822 34.9576 12.6357 33.0921 12.6812H30.4986C30.5441 11.1342 30.5896 10.0877 30.5896 9.22322C30.5896 7.49421 29.4521 6.40222 27.5866 6.40222C24.9931 6.40222 23.6281 7.76722 23.5371 10.3152L23.4461 12.7267H22.0356C20.3521 12.7267 19.2146 14.0462 19.2146 15.7752C19.2146 17.6862 19.9426 18.9602 21.8536 18.9602Z"
          fill={color}
        />
        <path
          d="M39.5773 15.7752V19.8702C39.5773 22.9642 39.4863 26.9682 39.4863 30.4717C39.4863 33.1562 41.0788 33.8842 43.1263 33.8842C45.1738 33.8842 46.8573 33.0652 46.9028 30.9267C46.9938 29.1977 46.8118 26.7407 46.8118 25.0572C46.8118 20.6437 48.5863 19.2787 50.9978 19.2787H51.5893C53.5458 19.2787 54.4558 17.4132 54.4558 15.6842C54.4558 13.3182 53.3638 12.2717 51.3163 12.2717C49.3143 12.2717 47.0848 13.6367 46.2658 15.5022L45.9473 14.3647C45.5833 13.0907 44.6278 12.4537 43.2173 12.4537C40.9423 12.4537 39.5773 13.5912 39.5773 15.7752Z"
          fill={color}
        />
        <path
          d="M63.1431 25.0572C68.7396 25.0117 71.6971 24.9207 72.6071 24.9207C75.6556 24.8752 76.2926 23.6467 76.2926 20.9167C76.2926 16.5487 72.3796 12.2717 66.5556 12.2717C60.4131 12.2717 55.5901 17.0037 55.5901 23.6922C55.5901 29.4707 60.3676 34.0662 66.3736 34.0662C70.0591 34.0662 72.1066 33.4292 73.6991 32.4737C74.7911 31.8367 75.3826 30.8357 75.3826 29.7437C75.3826 27.8782 74.0631 26.2402 72.4251 26.2402C71.6061 26.2402 70.8781 26.4677 70.1046 26.8772C69.3766 27.2867 68.1026 27.6962 66.8286 27.6962C65.3271 27.6962 63.4616 26.8317 63.1431 25.0572ZM66.4646 18.0502C68.0571 18.0502 69.2856 19.0512 69.2856 20.3707C69.2856 20.5527 69.0126 20.5982 68.7396 20.5982C66.9196 20.6437 64.8266 20.7347 63.0976 20.7347C63.2341 19.3697 64.6446 18.0502 66.4646 18.0502Z"
          fill={color}
        />
        <path
          d="M101.529 19.2332L101.575 15.7297C101.575 13.6367 100.437 12.4992 98.1166 12.4992C96.9791 12.4992 95.9781 12.8177 95.3866 13.6367C95.1591 13.9552 94.9771 14.3192 94.8406 14.8197C93.7486 13.2727 91.8376 12.4082 89.7446 12.4082C83.6476 12.4082 78.9611 16.6852 78.9611 23.6467C78.9611 29.5617 82.8741 33.9752 89.1986 33.9752C91.6101 33.9752 93.5666 32.8377 94.6586 31.0632C95.2501 33.1107 96.2511 33.8387 97.8436 33.8387C99.9366 33.8387 101.666 33.2927 101.666 30.7447C101.575 29.1977 101.529 27.6507 101.529 26.1037V19.2332ZM86.5141 23.4647C86.5141 20.4162 88.1066 18.7327 90.4271 18.7327C92.4746 18.7327 94.3401 20.2797 94.3401 23.1462C94.3401 26.0127 92.4291 27.7417 90.1996 27.7417C88.0611 27.7417 86.5141 25.8762 86.5141 23.4647Z"
          fill={color}
        />
        <path
          d="M106.628 22.2362L106.582 27.6962C106.491 29.8347 106.537 30.0167 106.537 30.6082C106.537 33.1107 108.402 33.8387 110.177 33.8387C112.224 33.8387 114.044 32.9742 114.044 30.9267V23.1917C113.999 20.9167 114.499 18.4597 117.093 18.4597C118.822 18.4597 119.641 20.3707 119.641 21.9632C119.686 26.2402 119.55 27.5142 119.55 30.8812C119.55 32.8377 121.006 33.7932 123.099 33.8387C125.101 33.8842 126.83 33.0652 126.921 31.0632C126.966 29.6072 126.966 27.9692 126.966 26.6952C126.966 24.8297 126.966 23.3282 127.012 21.4627C127.012 19.8247 128.331 18.5507 129.878 18.5507C131.744 18.5507 132.199 20.1887 132.199 21.9632C132.199 25.6487 132.062 28.2877 132.062 30.9267C132.062 32.7012 133.518 33.8387 135.793 33.8387C137.158 33.8387 139.388 33.4747 139.524 31.1542C139.615 29.3342 139.615 27.6962 139.615 26.1037L139.57 21.0077C139.57 15.7297 137.022 12.1807 131.243 12.2717C129.059 12.3172 126.466 13.6822 125.146 15.5477C124.009 13.6367 122.052 12.2717 119.049 12.2717C116.865 12.2717 114.545 13.7277 113.726 15.2292L113.544 14.4102C113.271 13.2272 112.088 12.2717 110.45 12.2717C107.902 12.2717 106.582 13.4092 106.582 15.5022C106.582 16.9582 106.719 17.9592 106.628 22.2362Z"
          fill={color}
        />
        <path
          d="M144.577 4.17272C144.486 11.6802 144.35 21.5992 144.532 28.8792C144.577 32.9742 146.215 34.1117 148.763 33.8387C151.448 33.5657 152.221 32.5647 152.312 30.3807C152.358 28.8792 152.221 27.1502 152.221 25.2392C152.221 18.1412 152.221 11.2252 152.358 4.17272C152.403 1.89772 150.856 0.805714 148.445 0.805714C146.352 0.805714 144.623 1.85221 144.577 4.17272Z"
          fill={color}
        />
        <path
          d="M178.71 19.2332L178.756 15.7297C178.756 13.6367 177.618 12.4992 175.298 12.4992C174.16 12.4992 173.159 12.8177 172.568 13.6367C172.34 13.9552 172.158 14.3192 172.022 14.8197C170.93 13.2727 169.019 12.4082 166.926 12.4082C160.829 12.4082 156.142 16.6852 156.142 23.6467C156.142 29.5617 160.055 33.9752 166.38 33.9752C168.791 33.9752 170.748 32.8377 171.84 31.0632C172.431 33.1107 173.432 33.8387 175.025 33.8387C177.118 33.8387 178.847 33.2927 178.847 30.7447C178.756 29.1977 178.71 27.6507 178.71 26.1037V19.2332ZM163.695 23.4647C163.695 20.4162 165.288 18.7327 167.608 18.7327C169.656 18.7327 171.521 20.2797 171.521 23.1462C171.521 26.0127 169.61 27.7417 167.381 27.7417C165.242 27.7417 163.695 25.8762 163.695 23.4647Z"
          fill={color}
        />
        <path
          d="M183.809 3.99072L183.9 22.2817L183.763 29.9712C183.718 32.3372 184.582 33.7022 186.675 33.7932C188.541 33.8842 189.815 33.3382 190.224 31.6092L190.361 31.0177C191.407 32.8377 193.637 34.0207 195.957 34.0207C202.418 34.0207 206.786 29.0612 206.786 22.8732C206.786 17.0037 202.691 12.2717 196.685 12.2717C194.41 12.2717 192.272 12.9542 191.089 14.8197C191.089 14.7742 191.089 14.1372 191.225 3.71771C191.271 1.03322 189.36 0.532715 187.358 0.532715C185.356 0.532715 183.854 1.48822 183.809 3.99072ZM199.324 22.9187C199.324 25.7397 197.231 27.7872 195.093 27.7872C193.045 27.7872 191.18 25.9672 191.18 23.2827C191.18 20.0977 193.136 18.6872 195.457 18.6872C197.459 18.6872 199.324 20.2797 199.324 22.9187Z"
          fill={color}
        />
        <path
          d="M218.837 12.2717C214.15 12.2717 209.919 15.1837 209.919 19.5517C209.919 23.6467 213.695 25.0117 217.426 25.5577C219.883 25.9217 220.793 26.1037 220.793 27.0137C220.793 27.8327 220.065 28.2422 218.928 28.2422C216.061 28.2422 215.015 27.1957 212.649 27.1957C210.601 27.1957 209.828 28.6972 209.828 30.6082C209.828 32.6557 213.513 34.1117 218.154 34.1117C224.297 34.1117 227.527 31.3362 227.527 26.8317C227.527 22.6457 224.388 21.0077 219.519 20.3252C217.927 20.0977 216.607 20.0977 216.607 19.1422C216.607 18.2777 217.699 17.8682 219.064 17.8682C220.611 17.8682 222.522 18.7782 224.024 18.7782C225.98 18.7782 226.799 17.5042 226.799 15.6387C226.799 14.3647 225.98 13.6367 225.025 13.2272C223.341 12.4992 221.43 12.2717 218.837 12.2717Z"
          fill={color}
        />
      </svg>
    </div>
  );
}
